<template>
  <div class="pho-form-item">
    <van-field
      v-model="formValue"
      :label="showLabel ? $attrs.label : ''"
      :name="$attrs.__vModel__"
      :rules="$attrs.rules"
      :required="$attrs.required"
      style="padding-bottom: 0"
      :disabled="$attrs.disabled"
    >
      <template slot="input">
        <i
          v-if="$attrs.prefixIcon"
          :class="$attrs.prefixIcon"
          style="color: #969799; margin-right: 8px"
        />
        <van-field
          v-model="formValue"
          style="padding: 0"
          :type="showPassword ? 'password' : type"
          :placeholder="$attrs.placeholder"
          :clearable="$attrs.clearable"
          :maxlength="$attrs.maxlength"
          :readonly="$attrs.readonly"
          :disabled="$attrs.disabled"
        />
      </template>
      <template slot="right-icon" v-if="$attrs.suffixIcon">
        <i :class="$attrs.suffixIcon" />
      </template>
    </van-field>
    <div
      :class="$attrs.disabled ? 'pho-disabled' : ''"
      class="van-field__word-limit"
      style="padding: 0 16px 10px; margin: 0"
    >
      <template v-if="$attrs.showWordLimit">
        <span class="van-field__word-num" style="margin-top: 4px">{{
          formValue.length
        }}</span
        >/{{ $attrs.maxlength }}</template
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "phone-form-input",
  model: {
    prop: "value", // 绑定的值，通过父组件传递
    event: "update",
  },
  props: {
    value: {
      type: String,
      default: "",
    },

    // type: text-文本 textarea-文本域 password-密码框
    type: {
      type: String,
      default: "text",
    },
    // 是否为密码输入框
    showPassword: {
      type: Boolean,
      default: false,
    },
    // 是否展示标题
    showLabel: {
      type: Boolean,
      default: true,
    },
  },

  computed: {
    formValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("update", val);
      },
    },
  },
};
</script>

<style lang="scss" scoped></style>
